<template>
	<view>
		<view :style="{ height: windowHeight + 'px' }">
			<camera mode="normal" device-position="back" flash="off" :style="{ height: cameraHeight + 'px' }">
				<cover-view class="controls" style="width: 100%; height: 100%">
					<!-- 头像面 -->
					<cover-image v-if="props.imgType == 1" class="w569-h828" :src="config.getImage('camera1')" />
					<!-- 国徽面 -->
					<cover-image v-if="props.imgType == 2" class="w569-h828" :src="config.getImage('camera2')" />
				</cover-view>
			</camera>
			<view class="msg" v-if="!cameraHeight" :style="{ lineHeight: windowHeight + 'px' }">请横屏，端平手机</view>
			<view class="bottom font-36-fff">
				<view class="wrap">
					<view class="back" @click="close">取消</view>
					<view @click="takePhoto">
						<!-- <image class="w131-h131" src="../static/take_camera_btn_icon.png"> </image> -->
						<view>拍照</view>
					</view>
					<view @click="chooseImage"> 相册 </view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted,
		onBeforeUnmount,
		watch
	} from 'vue';
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app';
	import config from '@/config.js';
	const cameraHeight = ref('');
	const windowHeight = ref('');
	const cameraContext = ref({});

	const props = defineProps({
		imgType: Number,
		isGyroscope: Boolean,
	});

	const emit = defineEmits(['getImgPath', 'colseCamera']);

	onMounted(() => {
		if (uni.createCameraContext) {
			cameraContext.value = uni.createCameraContext();
		} else {
			// 如果希望用户在最新版本的客户端上体验您的小程序，可以这样子提示
			uni.showModal({
				title: '提示',
				content: '当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试。',
			});
		}
		const systemInfo = uni.getSystemInfoSync();
		windowHeight.value = systemInfo.windowHeight;
		cameraHeight.value = systemInfo.windowHeight - 80;
		// 开启陀螺仪
		if (props.isGyroscope) {
			// 初始化陀螺仪传感器监听
			// 取得设备方向
			// 参考：https://developers.weixin.qq.com/miniprogram/dev/api/
			wx.startDeviceMotionListening({
				// 参考：https://developers.weixin.qq.com/miniprogram/dev/api/device/motion/wx.onDeviceMotionChange.html
				interval: 'normal',
				success: (res) => {
					console.log(res);
				},
				fail: () => {
					console.log('startDeviceMotionListening - fail');
				},
			});
			wx.onDeviceMotionChange((res) => {
				console.log('垂直于地面的 X 轴方向上的旋转角度', res.beta);
				console.log('垂直于地面的 Y 轴方向上的旋转角度', res.gamma);
				// 参考：https://developers.weixin.qq.com/miniprogram/dev/api/device/motion/wx.onDeviceMotionChange.html
				// res.beta:垂直于地面的 X 轴方向上的旋转角度
				// res.gamma：垂直于地面的 Y 轴方向上的旋转角度
				if (Math.abs(res.beta) > 30 || Math.abs(res.gamma) > 90) {
					// 请横屏且端正手机拍照
					cameraHeight.value = 0;
				} else {
					cameraHeight.value = windowHeight.value - 80;
				}
			});
		}
	});
	onBeforeUnmount(() => {
		uni.stopGyroscope({
			success() {
				console.log('stop success!');
			},
			fail() {
				console.log('stop fail!');
			},
		});
		wx.stopDeviceMotionListening();
	});
	// 侦听陀螺仪开关
	watch(props.isGyroscope, (oldVal, newVal) => {
		console.log('监听的新旧值', oldVal, newVal);
	});

	const takePhoto = () => {
		if (cameraHeight.value == 0)
			// 如果不是横屏模式则不拍照
			return;
		cameraContext.value.takePhoto({
			quality: 'normal',
			success: (res) => {
				uni.showToast({
					title: '拍照成功',
					icon: 'none',
					duration: 1200,
				});
				console.log(res)
				emit('getImgPath', res.tempImagePath);
			},
			fail: (err) => {
				uni.showToast({
					title: '拍照失败，请检查系统是否授权',
					icon: 'none',
					duration: 1200,
				});
				console.log('图片拍照失败', err);
			},
		});
	};
	// 从相册选取
	const chooseImage = () => {
		uni.chooseImage({
			count: 1,
			sizeType: ['original', 'compressed'],
			sourceType: ['album'],
			success: (res) => {
				console.log('相册选取成功', res);
				emit('getImgPath', res.tempFilePaths[0]);
			},
			fail: (err) => {
				console.log('相册选取失败', err);
			},
		});
	};
	// 关闭相机
	const close = () => {
		emit('colseCamera', false);
	};
</script>

<style lang="scss" scoped>
	.icon-w569-h828 {
		width: 569rpx;
		height: 828rpx;
	}

	.controls {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.bottom {
		width: 100%;
		background-color: #000;

		.wrap {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 80px;
			padding: 0 73rpx;
		}
	}

	.w569-h828 {
		width: 634rpx;
		height: 402rpx;
	}

	.w131-h131 {
		width: 131rpx;
		height: 131rpx;
	}

	.font-36-fff {
		font-size: 36rpx;
		color: #fff;
	}

	.msg {
		width: 100%;
		height: 100%;
		font-size: 50rpx;
		text-align: center;
	}
</style>